<template>
  <el-dialog
    title="更换域名"
    v-model="state.dialogVisible"
    width="500"
    center
    :close-on-click-modal="false"
    @close="close"
  >
    <el-form :rules="rule" ref="formRef" :model="state">
      <el-form-item label="域名" prop="inputValue">
        <el-input v-model.trim="state.inputValue" style="max-width: 800px" placeholder="请输入域名" class="请输入域名">
          <template #prepend>
            <el-select v-model="state.select" style="width: 115px">
              <el-option label="https://" value="1" />
              <el-option label="http://" value="2" />
            </el-select>
          </template>
        </el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="confirm" :loading="state.loading">确 定</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { updateUrl } from '@/api/business.js'
import { ElMessage } from 'element-plus'
const state = reactive({
  dialogVisible: false,
  select: 'https://',
  inputValue: '',
  loading: false,
})
const formRef = ref()
const rule = {
  inputValue: [{ required: true, message: '请输入域名', trigger: 'blur' }],
}
const close = () => {
  state.dialogVisible = false
  state.inputValue = ''
  state.loading = false
  state.select = 'https://'
  formRef.value.resetFields()
}
const confirm = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      try {
        state.loading = true
        const res = await updateUrl({ domain: state.select + state.inputValue })
        if (!res.code) {
          ElMessage({
            message: '操作成功',
            type: 'success',
          })
          close()
        }
      } finally {
        state.loading = false
      }
    }
  })
}
defineExpose({ state })
</script>
<style scoped lang="scss">
:deep().el-input-group--prepend .el-input-group__prepend .el-select .el-select__wrapper {
  box-shadow: unset;
}
</style>
